<template>
  <view style="width: 100%; min-height: 100vh; background-color: white;" v-if="show_flag">
    <view style="width: 100%;">
      <mark-slide-list :list="my_comment_list" :button="buttonList" :border="true" @click="clickMethod" @change="changeMethod"></mark-slide-list>
      <view v-if="my_comment_list.length == 0" class="justify-center align-center"
            style="width: 100%; padding-top: 50%; flex-direction: column; text-align: center;">
        <image src="/static/image/no_content@2x.png" style="width: 264upx; height: 264upx;"></image>
        <view class="flex justify-center" style="font-size: 24upx; color: #999999;">暂无内容</view>
      </view>
      <view>
        <view class="flex align-center justify-center"
              v-if="my_comment_list.length >15"
              style="width: 100%; height: 102upx; padding: 0 50upx;">
          <view style="width: 30%; height: 2upx; background-color: #F1F1F1;"></view>
          <view style="width: 40%; text-align: center;">
            <view v-if="!bottom_flag" style="color: #CACACA; font-size: 24upx; margin: 0 40upx;">到底了</view>
            <view v-else class="action">
              <view class="cu-load" :class="!is_load?'loading':'over'" style="font-size: 28upx; color: #CACACA;"></view>
            </view>
          </view>
          <view style="width: 30%; height: 2upx; background-color: #F1F1F1;"></view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import markSlideList from 'components/mark-slide-list/mark-slide-list'
import {evaluate_getListByCon, evaluate_delEvaluate} from "api/comment/comment"
export default {
  components: {
    markSlideList
  },
  data() {
    return {
      my_comment_list: [], //我的评论列表
      buttonList: [
        {
          title: '删除',
          background: '#E52718'
        }
      ], //滑动后显示按钮
      bottom_flag: true, //触底标识
      page: 1, //分页
      is_load: false, //加载
      show_flag: false,
    }
  },
  methods: {
    //初始化
    pageInit(page = 1, type){
      this.page = page;
      let user_info = uni.getStorageSync('user_info')
      evaluate_getListByCon({user_id: user_info.id, not_f_table: 'video', page}).then(res=>{
        console.log(res)
        if(user_info.id){
          if(type){
            this.my_comment_list = [];
          }
          let temp_data = res.data.data;
          if(temp_data.length == 0){
            this.bottom_flag = false;
          }else {
            temp_data.forEach(item=>{
              item.slide_x = 0;
              this.my_comment_list.push(item);
            })
          }
        }
      }).finally(()=>{
        this.show_flag = true;
      })
    },
    //去商品详情页
    clickMethod(item){
      if(item.f_table == 'product'){
        if(item.evaluate){
          if(item.evaluate.article){
            let jump_url_obj={
              article_product:{
                url: '/pages/passBand/commodityDetail/commodityDetail',
                query:{
                  product_id: item.evaluate.id
                }
              },
              product:{
                url: '/pages/passBand/otherDetail/otherDetail',
                query:{
                  article_id: item.evaluate.article_id
                }
              }
            }
            this.$uniNavigateTo(jump_url_obj[item.evaluate.article.type])
          }
        }
      }else {
        if (item.evaluate){
          this.$uniNavigateTo({
            url: '/pages/tutorials/articleDetail/articleDetail',
            query: {
              course_id: item.evaluate.id
            }
          })
        }
      }
    },
    //删除评价
    changeMethod(item, buttonItem, index){
      // let evaluate_id = '';
      // if(item.evaluate){
      //   evaluate_id = item.evaluate.id
      // }
      uni.showModal({
        content: '确定要删除评论么',
        success: (res)=> {
          if (res.confirm) {
            evaluate_delEvaluate({evaluate_id: item.id}).then(res=>{
              console.log(res)
              this.my_comment_list.splice(index, 1)
            }).catch(err=>{
              uni.showToast({
                title: err.msg,
                icon: 'none'
              })
            })
            console.log('用户点击确定');
          } else if (res.cancel) {
            console.log('用户点击取消');
          }
        }
      });
    },
  },
  onLoad() {
    this.pageInit();
  },
  //上拉加载
  onReachBottom() {
    if (this.bottom_flag) {
      this.is_load = false;
      this.page += 1;
      this.pageInit(this.page);
    }
    console.log('上拉加载')
  },
  //下拉刷新
  onPullDownRefresh() {
    this.bottom_flag = true;
    this.pageInit(1, 1);
    uni.stopPullDownRefresh();
  }
}
</script>

<style lang="less" scoped>
</style>
